<form
  *ngIf="isActive"
  name="add-secret"
  (ngSubmit)="submit()"
>
  <div class="card bg-light mt-4">
    <div class="card-body">
      <h3 data-cy="header">
        {{ isEditMode() ? 'Edit' : 'Add' }} Secret
      </h3>
      <div class="form-group">
        <div [ngClass]="{'input-group input-group-lg': !detailsShown}">
          <input
            [(ngModel)]="itemName"
            class="form-control form-control-lg"
            placeholder="Enter secret name"
            name="fieldName"
            #fieldName>
          <span
            *ngIf="!detailsShown"
            class="input-group-append"
          >
            <button
              *ngIf="!detailsShown"
              class="btn btn-default btn-lg pull-right"
              data-cy="details"
              type="button"
              title="More details..."
              (click)="detailsShown = true"
            >
              <span class="fa fa-angle-double-down"></span>
            </button>
          </span>
        </div>
      </div>
      <div *ngIf="detailsShown">
        <div class="form-group">
          <label for="secretValue">Password</label>
          <div class="input-group input-group-lg">
            <input
              [(ngModel)]="itemSecret"
              class="form-control"
              placeholder="Enter password"
              name="secretValue"
              id="secretValue"
              #secretValue>
            <span class="input-group-append">
              <button
                class="btn btn-primary"
                type="button"
                data-cy="generate"
                title="Generate"
                (click)="generate()"
              >
                <i class="fa fa-refresh"></i>
              </button>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label for="secretContent">Notes</label>
          <textarea
            [(ngModel)]="itemContent"
            class="form-control form-control-lg"
            placeholder="Enter notes"
            name="secretContent"
            id="secretContent"
            rows="4"
            #secretContent
          ></textarea>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <button
        type="submit"
        class="btn btn-lg btn-success mr-2" [disabled]="!itemName"
        data-cy="submit"
        title="Submit"
      >
        <i class="fa fa-plus-circle"></i>
        <span class="hidden-xxs ml-2">{{ isEditMode() ? 'Save' : 'Add' }}</span>
      </button>
      <button
        type="button"
        class="btn btn-lg btn-default"
        data-cy="cancel"
        title="Cancel"
        (click)="close()"
      >
        <i class="fa fa-ban"></i>
        <span class="hidden-xxs ml-2">Cancel</span>
      </button>
      <button
        *ngIf="isEditMode()"
        type="button"
        class="btn btn-lg btn-danger pull-right"
        data-cy="remove"
        title="Remove"
        (click)="remove(itemSource)"
      >
        <i class="fa fa-trash"></i>
      </button>
    </div>
  </div>
</form>
